﻿<script setup lang="ts" name="QRcode">
import { storeToRefs } from 'pinia'
import { colorMix } from '@/utils/color'
import logo from '@/assets/logo.png'
import { useAppStoreWithOut } from '@/store/modules/app'
import { useMessage } from '@/hooks/web/useMessage'
const { success, warning } = useMessage()

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)
const { t } = useI18n() // 国际化


const title = computed(() => t('common', 'title'))

const qrCodeStyle = ref({
  color: {
    dark: systemConfig.value.theme.color,
    light: colorMix(systemConfig.value.theme.color, systemConfig.value.isLight ? '#ffffff' : '#000000', 0.9)
  }
})

const codeClick = () => {
  success('二维码点击事件触发')
}

const asyncTitle = ref('')

setTimeout(() => {
  asyncTitle.value = unref(title)
}, 3000)

const disabledClick = () => {
  warning('二维码已失效')
}

const logoStyle = ref({
  src: logo,
  logoSize: 0.2,
  borderSize: 0.05,
  borderRadius: 50,
  bgColor: colorMix(systemConfig.value.theme.color, systemConfig.value.isLight ? '#ffffff' : '#000000', 0.9)
})

// 父组件调用子组件的download方法
const qrCodeRef: any = ref(null)
const download = () => {
  const qrCodeRefDom = unref(qrCodeRef)
  if (!qrCodeRefDom) return
  qrCodeRefDom.download(title.value + '二维码')
}

// 父组件调用子组件的download方法
const qrCodeDiyRef: any = ref(null)
const downloadDiy = () => {
  const qrCodeDiyRefDom = unref(qrCodeDiyRef)
  if (!qrCodeDiyRefDom) return
  qrCodeDiyRefDom.download(title.value + '扩展二维码')
}

const onQrCodeDone = ({ ctx }: any) => {
  if (ctx instanceof CanvasRenderingContext2D) {
    // 额外绘制
    ctx.fillStyle = systemConfig.value.theme.color
    ctx.font = '16px "微软雅黑"'
    ctx.textBaseline = 'bottom'
    ctx.textAlign = 'center'
    ctx.fillText('扫码有惊喜', 80, 152, 158)
  }
}

const qrCodeDiyStyle = ref({
  margin: 8,
  color: {
    dark: systemConfig.value.theme.color,
    light: colorMix(systemConfig.value.theme.color, systemConfig.value.isLight ? '#ffffff' : '#000000', 0.9)
  }
})
const logoDiyStyle = ref({
  src: logo,
  logoSize: 0.2,
  borderSize: 0.05,
  borderRadius: 0,
  bgColor: colorMix(systemConfig.value.theme.color, systemConfig.value.isLight ? '#ffffff' : '#000000', 0.9)
})
</script>

<template>
  <PageWrap scroll>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-alert title="基于 qrcode 实现二维码的封装。" type="success" :closable="false" show-icon />
      <el-row :gutter="systemConfig.space">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>基础用法(cavans)</span>
              </div>
            </template>
            <qr-code :text="title" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>基础用法(img)</span>
              </div>
            </template>
            <qr-code :text="title" tag="img" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>配置样式</span>
              </div>
            </template>
            <qr-code :text="title" :options="qrCodeStyle" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>点击事件</span>
              </div>
            </template>
            <qr-code :text="title" :options="qrCodeStyle" @click="codeClick" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>异步获取</span>
              </div>
            </template>
            <qr-code :text="asyncTitle" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>失效禁用</span>
              </div>
            </template>
            <qr-code :text="title" disabled @disabled-click="disabledClick" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>logo配置</span>
              </div>
            </template>
            <qr-code :text="title" :logo="logo" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>logo样式配置</span>
              </div>
            </template>
            <qr-code :text="title" :logo="logoStyle" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>大小配置</span>
              </div>
            </template>
            <qr-code :text="title" :width="100" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>下载</span>
              </div>
            </template>
            <qr-code ref="qrCodeRef" :text="title" :width="140" />
            <el-button type="primary" @click="download">下载</el-button>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>扩展绘制</span>
              </div>
            </template>
            <qr-code ref="qrCodeDiyRef" :text="title" :options="{ margin: 8 }" :width="158" @done="onQrCodeDone" />
            <el-button type="primary" class="mt-5px" @click="downloadDiy">下载</el-button>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>综合使用</span>
              </div>
            </template>
            <qr-code ref="qrCodeDiyRef" :text="asyncTitle" :logo="logoDiyStyle" :options="qrCodeDiyStyle" :width="158" @done="onQrCodeDone" />
            <el-button type="primary" class="mt-10px" @click="downloadDiy">下载</el-button>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);

    .el-card {
      display: flex;
      flex-direction: column;
      height: 300px;

      :deep(.el-card__body) {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
